<template>
  <div class="singer-album">
    <div class="album-slide">
      <div class="singer-img">
        <img :src="singerList.pic">
      </div>
      <ul class="info">
        <li v-if="singerList.sex==0||singerList.sex==1">{{attachSex(singerList.sex)}}</li>
        <li v-if="singerList.birth">生日：{{attachBirth(singerList.birth)}}</li>
        <li>故乡：{{singerList.location}}</li>
      </ul>
    </div>
    <div class="album-content">
      <div class="intro">
        <h2>{{singerList.name}}</h2>
        <span>{{singerList.introduction}}</span>
      </div>
      <div class="content">
        <ListContent :songList="songList">
          <template slot="title">歌单</template>
        </ListContent>
      </div>
    </div>
  </div>
</template>

<script>
import ListContent from "@/components/ListContent";
export default {
  name: "singerInfo",
  components:{
    ListContent
  },
  mounted() {
    this.singerId=this.$route.params.id
    this.getSinger()
    this.getSong()
  },
  data(){
    return{
      singerId:'',
      singerList:[],
      songList:[]
    }
  },
  methods:{
    async getSinger(){
     let result=await this.$API.reqShowSingerById(this.singerId)
      if (result.code==10000){
        this.singerList=result.data
      }else {
       await Promise.reject(new Error('fail'))
      }
    },
    async getSong(){
    let result=await this.$API.reqShowSongBySingerId(this.singerId)
      if (result.code==10000){
        this.songList=result.data
      }else {
        await Promise.reject(new Error('fail'))
      }
    },
    attachSex(sex){
      if (sex==0){
        return '女'
      }else if (sex==1){
        return '男'
      }else if (sex==2){
        return '组合'
      }else if (sex==3){
        return '不明'
      }
      return ''
    },
    attachBirth(birth){
      return birth.substr(0,10)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/singer-album.scss';
</style>

